<template>
	<view v-if="answers">
		<view class="content">
			<rich-text :nodes="question.content == undefined || question.content == null ? '' : question.content" :selectable="false" image-menu-prevent></rich-text>
		</view>
		<view class="answer" v-for="(item,index) in question.subQuestions" :key="index">
			<text id="title">{{index+1}}.</text>
			<view v-if="item.type == 0 && answers[item.questionId.toString()]">
				<single-choice :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]"></single-choice>
			</view>
			<view v-if="item.type == 1 && answers[item.questionId.toString()]">
				<multiple-choice :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]"></multiple-choice>
			</view>
			<view v-if="item.type == 2 && answers[item.questionId.toString()]">
				<judgement :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]"></judgement>
			</view>
			<view v-if="item.type == 3 && answers[item.questionId.toString()]">
				<completion :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]"></completion>
			</view>
		</view>
	</view>
</template>

<script>
	import SingleChoice from '../../templates/question/SingleChoice.vue';
	import MultipleChoice from '../../templates/question/MultipleChoice.vue';
	import Judgement from '../../templates/question/Judgement.vue';
	import Completion from '../../templates/question/Completion.vue';
	
	export default {
		name: 'cloze',
		data() {
			return {
			}
		},
		methods: {
			
		},
		components: {
			SingleChoice,
			MultipleChoice,
			Judgement,
			Completion
		},
		props: {
			question: {
				type: Object,
				value: {}
			},
			answers: {
				type: Object,
				value: {}
			},
			change: {
				type: Function,
				value: function(questionId) {}
			},
			disabled: {
				type: Boolean,
				value: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 710rpx;
		margin: 12rpx 20rpx;
		font-size: 36rpx;
	}

	.answer {
		width: 710rpx;
		margin: 12rpx 20rpx;
		
		#title {
			color: $secondary-color;
		}
		
		#textarea {
			margin: 6rpx 0 24rpx;
		}
	}
</style>
